<template>
 <view class="context">
 	<view class="status_bar">
 	</view>
 	<view class="tab">
 		<tab :data="tabData"></tab>
 		<other :data="subData" style="margin-top: 30rpx;"></other>
 	</view>
 	<!-- 组件 -->
 	<view class="info">
 		<view class="info-title">当天收入</view>
 		<view class="info-price">0.0000000</view>
 		<view class="info-bottom">
 			<view class="info-price-all">
 				<view>总收入</view>
 				<view>0.0000</view>
 			</view>
 			<view class="tag"></view>
 			<view class="info-price-month">
 				<view>本月收入</view>
 				<view>0.0000</view>
 			</view>
 		</view>
 	</view>
 	<!-- IPFS -->
 	<view class="box">
 		<view class="box-item">
 			<view class="box-item-head">
 				<view class="item-head-icon">
 					<image src="/static/ICON_BTC21.png"></image>
 				</view>
 				<text class="item-head-title">FIL云算力</text>
 			</view>
 			<view class="box-item-info">
 				<view class="item-info-content">
 					<text>时间</text>
 					<text>2021.03.26</text>
 				</view>
 				<view class="item-info-content">
 					<text>当日产出</text>
 					<text>1.00TB</text>
 				</view>
 				<view class="item-info-content">
 					<text>立即释放</text>
 					<text>2.8367000</text>
 				</view>
 				<view class="item-info-content">
 					<text>线性释放</text>
 					<text>2.8368000</text>
 				</view>
 			</view>
 		</view>
 	</view>
 </view>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import tab from "../shop/w-tab/w-tab";
import other from "../shop/w-tab-other/w-tab-other";
export default {
  components: {
    other,
    tab
  },
  data() {
    return {

        tabData: [{
        		name: "个人算力"
        	},
        	{
        		name: "销售奖励"
        	},
        	{
        		name: "团队算力"
        	}
        ],
        subData: [{
        		name: "IPFS"
        	},
        	{
        		name: "BTC"
        	},
        	{
        		name: "ETH"
        	}
        ]
    };
  },
  methods: {
    ...mapActions("mf/my", ["loadRewardList", "extractReward"]),
    selectAction(item) {
      this.select = item;
    },
    togglePayPassword() {
      this.showpay = false;
    },
    openPass() {
      this.closeShade();
      if (this.rewardList.total_data.no_extract == 0) {
        this.makeToast({ title: this.$t("new.none_reward") });
        return;
      }
      this.showpay = true;
    },
    async payPasswordDone(data) {
      this.togglePayPassword();
      await this.extractReward({
        pay_password: data.password,
        type: this.select.type,
      });
      this.makeToast({ title: "提取成功" });
      this.loadRewardList({
        type: "all",
      });
    },
    closeShade() {
      uni.showTabBar();
      this.show = false;
    },
    openShow() {
      uni.hideTabBar();
      this.show = true;
    },
  },
  computed: {
    ...mapGetters("mf/my", ["rewardList"]),
    list() {
      return [
        {
          name: this.$t("new.suanili_reward"),
          num: this.rewardList.total_data.mining_num,
          symbol: "FIL",
        },
        {
          name: this.$t("new.suanili_reward_day"),
          num: this.rewardList.total_data.mining_num_day,
          symbol: "FIL",
        },
        {
          name: this.$t("new.shop_reward"),
          num: this.rewardList.total_data.spread_num,
          symbol: "M",
        },
        {
          name: this.$t("new.shop_reward_day"),
          num: this.rewardList.total_data.spread_num_day,
          symbol: "M",
        },
        {
          name: this.$t("new.team_reward"),
          num: this.rewardList.total_data.team_num,
          symbol: "FIL",
        },
        {
          name: this.$t("new.team_reward_day"),
          num: this.rewardList.total_data.team_num_day,
          symbol: "FIL",
        },
      ];
    },
    //     power 算力收益
    // spread 销售收益
    // team 团队收益
    select_list() {
      return [
        {
          name: "算力提现",
          id: 0,
          type: "power",
        },
        {
          name: "销售提现",
          id: 1,
          type: "spread",
        },
        {
          name: "团队提现",
          id: 2,
          type: "team",
        },
      ];
    },
  },
  async onShow() {
    await this.loadRewardList({
      type: "all",
    });
  },
};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
		height: 100vh;
	}
	.tab {
		width: 702rpx;
		margin: 20rpx auto;
	}
	.info{
		color: #fff;
		width: 702rpx;
		height: 300rpx;
		background: #2A96EE;
		border-radius: 12rpx;
		margin: 20rpx auto;
		padding: 20rpx;
		text-align: center;

		.info-title{
			margin-top: 20rpx;
		}

		.info-price{
			font-size: 48rpx;
			font-weight: bold;
		}
	}
	.info-bottom{
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		margin-top: 50rpx;

		.tag{
			width: 2rpx;
			height: 44rpx;
			background: #FFFFFF;
			border-radius: 1rpx;
		}
	}

	.box {
		width: 702rpx;
		margin: 0 auto;

		.box-item {
			background-color: #fff;
			padding: 20rpx;
			margin-bottom: 20rpx;

			.box-item-head {
				display: flex;
				align-items: center;

				.item-head-title {
					font-size: 28rpx;
					font-weight: bold;
				}

				image {
					width: 44rpx;
					height: 44rpx;
					margin-right: 20rpx;
				}
			}
		}
	}

	.box-item-info {
		margin-top: 20rpx;

		.item-info-content {
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;
		}
	}

	.box-item-number {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;

		.item-number {
			width: 400rpx;
		}
	}
</style>
